// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView, InteractionManager } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';

// antd 按需加载
import { Modal, Stepper } from 'antd-mobile-rn';

// 引入 处理数据 所需文件
import { } from './module.js'

// 引入样式
import Styles from './style.js';

// 引入公用组件
import { CacheImage, Layout } from '../../components/index.js'

// 引入工具包
import { } from '../../util/images.js'
import { press, size, ScreenWidth, ScreenHeight, hotTextColor, pathHead, defaultDataList, onEndReached, onRefresh, concatDataList, defaultPage } from '../../util/utils.js'
import { Toast } from '@ant-design/react-native';

class Attribute extends Component {

	static propTypes = {

	}

	constructor(props) {
		super(props)
		this.state = {
			goodsNumber: props.goodsNumber,
			goodsId: props.goodsId,
			productId: props.productId,
			select: [],
			selectStr: [],
			actualSelect: []
		}
	}

	componentDidMount() {
		const { goodAttribute } = this.props
		let select = []
		let selectStr = []
		goodAttribute.attrList.map((item, index) => {
			item.items.map((items, indexs) => {
				if (items.selected) {
					select[index] = items.attrValueId
					selectStr[index] = items.attrValue
				}
			})
		})

		this.setState({
			select,
			selectStr
		})

	}


	componentWillReceiveProps(nextProps) {
		// const { goodsNumber, goodsId, productId } = nextProps
		// this.setState({
		// 	goodsNumber, goodsId, productId
		// })
		// this.setState({

		// })
	}

	render() {
		const { goodsNumber, select, selectStr, actualSelect } = this.state
		const { visible, onClose, onPress, goodDetail, goodAttribute, productId, goodsId, defaultBtn, defaultBtnOnPress, confirmBtn, confirmBtnOnPress } = this.props
		let selected = true
		if (actualSelect.length == goodAttribute.attrList.length) {
			let attr = goodAttribute.goodsAttr[actualSelect.join('_')]
			if (attr && attr.goodsId) {
				selected = true
			} else {
				selected = false
			}
		}
		return (
			<Modal
				popup
				maskClosable={true}
				visible={visible}
				animationType="slide-up"
				onClose={onClose}
			>
				<Layout>
					<View style={{
						height: ScreenHeight - 200,
						flexDirection: 'column',
						backgroundColor: '#fff'
					}}>
						<ScrollView
							style={{
								flex: 1
							}}
						>
							<View style={{
								flexDirection: 'row',
								alignItems: 'flex-end',
								padding: 15
							}}>
								<View style={{ width: 120, }}>
									<CacheImage
										resizeMod={"contain"}
										style={{
											width: 120,
											height: 120,
										}}
										source={{ uri: `${pathHead}${goodDetail.goods.goodsMainPic}` }}
									/>
								</View>
								<View style={{ paddingLeft: 15, flex: 1 }}>
									<Text style={{ fontSize: 14, color: '#333', lineHeight: 20, marginBottom: 5 }}>{goodDetail.goods.goodsName}</Text>
									<Text style={{ fontSize: 14, color: '#DD1A21', lineHeight: 20, marginBottom: 5 }}>￥{goodDetail.goods.goodsPrice}</Text>
									<Text style={{ fontSize: 12, color: '#333', lineHeight: 14, }}>已选 {selectStr.join(',')}</Text>
									{/* <Text style={{ fontSize: 12, color: '#333', lineHeight: 14, }}>已选 {selectStr.join('_')}{goodDetail.goodsAttribute}</Text> */}
								</View>
							</View>
							<View style={{}}>
								{goodAttribute.attrList.map((item, index) => {
									return (
										<View
											key={index}
											style={{
												paddingLeft: 15,
												marginBottom: 15
											}}
										>
											<Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, marginBottom: 10 }}>{item.attrName}</Text>
											<View style={{
												flexDirection: 'row',
												alignItems: 'center',
												flexWrap: 'wrap',
											}}>
												{item.items.map((attrItem, attrIndex) => {
													if (attrItem.enabled) {
														return (
															<TouchableOpacity
																key={attrIndex}
																style={[{
																	marginRight: 15,
																	height: 30,
																	paddingLeft: 10,
																	paddingRight: 10,
																	marginBottom: 10,
																	borderWidth: 1,
																	borderRadius: 5,
																},
																attrItem.attrValueId == select[index] ? { backgroundColor: '#000000', borderWidth: 0 } : { color: '#61676F' }
																]}
																onPress={() => {
																	let newSelect = [...select]
																	let newSelectStr = [...selectStr]
																	let actualSelect = [...select]
																	newSelect[index] = attrItem.attrValueId
																	newSelectStr[index] = attrItem.attrValue
																	actualSelect[index] = attrItem.attrValueId
																	actualSelect.sort(function (a, b) { return a - b });
																	console.log(actualSelect)
																	this.setState({
																		select: newSelect,
																		actualSelect: actualSelect,
																		selectStr: newSelectStr
																	})
																	// 说明选择了所有的选项
																	if (newSelect.length == goodAttribute.attrList.length) {
																		console.log(actualSelect)
																		// onPress({ goodsId: goodAttribute.goodsAttr[newSelect.join('_')].goodsId, productId })
																		let attr = goodAttribute.goodsAttr[actualSelect.join('_')]

																		console.log(attr)

																		if (attr && attr.goodsId) {
																			onPress({ goodsId: attr.goodsId, productId })
																		} else {
																			return
																		}
																	}
																}}>
																<Text style={[
																	{ fontSize: 12, lineHeight: 28, textAlign: 'center' },
																	attrItem.attrValueId == select[index] ? { color: '#fff', } : { color: '#61676F' }
																]}>{attrItem.attrValue}</Text>
															</TouchableOpacity>
														)
													} else {
														return (
															<View
																key={attrIndex}
																style={[{
																	marginRight: 15,
																	height: 30,
																	paddingLeft: 10,
																	paddingRight: 10,
																	marginBottom: 10,
																	borderWidth: 1,
																	borderRadius: 5,
																}, attrItem.attrValueId == select[index] ? { backgroundColor: '#000000', borderWidth: 0 } : { borderColor: '#ccc' }]}
															>
																<Text style={[
																	{ fontSize: 12, lineHeight: 28, textAlign: 'center' },
																	attrItem.attrValueId == select[index] ? { color: hotTextColor, } : { color: '#ccc' }
																]}>{attrItem.attrValue}</Text>
															</View>
														)
													}
												})}
											</View>
										</View>
									)
								})}
								<View style={{
									paddingLeft: 15,
									marginBottom: 15
								}}>
									<Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, marginBottom: 15 }}>数量</Text>
									<View style={{
										marginBottom: 15
									}}>
										<View style={{ width: 130 }}>
											<Stepper
												key="0"
												min={1}
												inputStyle={{ height: 30 }}
												value={goodsNumber}
												onChange={(value) => {
													this.setState({
														goodsNumber: value
													})
												}}
												defaultValue={1}
											/>
										</View>
									</View>
								</View>
							</View>
						</ScrollView>

						{selected && (
							<View style={{
								flexDirection: 'row',
							}}>
								<View style={{
									borderTopWidth: .5,
									borderLeftWidth: .5,
									borderLeftColor: '#c7c7c7',
									borderTopColor: '#c7c7c7',
									flex: 1,
									flexDirection: 'row',
								}}>
									<TouchableOpacity
										style={{
											flex: 1,
											height: 52,
											backgroundColor: '#fff',
										}}
										onPress={() => {
											// 说明选择了所有的选项
											let goodsId = this.state.goodsId
											if (select.length == goodAttribute.attrList.length) {
												let attr = goodAttribute.goodsAttr[actualSelect.join('_')]
												if (attr && attr.goodsId) {
													goodsId = attr.goodsId
												} else {
													return
												}
											} else {
												return
											}
											defaultBtnOnPress({
												goodsId: goodsId,
												productId: this.state.productId,
												goodsNumber: this.state.goodsNumber
											})
										}}>
										<Text style={{ fontSize: 14, color: '#333', lineHeight: 52, textAlign: 'center' }}>{defaultBtn}</Text>
									</TouchableOpacity>
								</View>
								<TouchableOpacity
									style={{
										flex: 1,
										height: 52,
										backgroundColor: '#000000'
									}}
									onPress={() => {
										// 说明选择了所有的选项
										let goodsId = this.state.goodsId
										if (select.length == goodAttribute.attrList.length) {
											let attr = goodAttribute.goodsAttr[actualSelect.join('_')]
											if (attr && attr.goodsId) {
												goodsId = attr.goodsId
											} else {
												Toast.info('未找到有效商品')
												return
											}
										} else {
											return
										}
										confirmBtnOnPress({
											goodsId: goodsId,
											productId: this.state.productId,
											goodsNumber: this.state.goodsNumber,
										})
									}}>
									<Text style={{ fontSize: 14, color: '#fff', lineHeight: 52, textAlign: 'center' }}>{confirmBtn}</Text>
								</TouchableOpacity>
							</View>
						)}
						{!selected && (
							<View style={{
								flexDirection: 'row',
							}}>
								<TouchableOpacity
									style={{
										flex: 1,
										height: 52,
										backgroundColor: '#000000'
									}}
								>
									<Text style={{ fontSize: 14, color: '#fff', lineHeight: 52, textAlign: 'center' }}>无货</Text>
								</TouchableOpacity>
							</View>
						)}
					</View>
				</Layout>
			</Modal >
		)
	}
}

export default pureRender(Attribute)
